<template>
  <div class="voice-result-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="分析结果"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />

    <!-- 页面内容区域 -->
    <div class="page-content">
      <!-- 分析结果区域 -->
      <div class="result-section">
        <div class="result-card">
          <h3 class="result-title">分析结果</h3>
          <div class="result-content">
            <div class="score-display">
              <div class="score-circle">
                <span class="score-number">{{ analysisResult?.score || 0 }}</span>
                <!-- <span class="score-total">/100</span> -->
              </div>
              <p class="score-level">{{ analysisResult?.level || '需要改进' }}</p>
            </div>

            <div class="result-details">
              <div class="detail-item">
                <span class="detail-label">准确度：</span>
                <span class="detail-value">{{ analysisResult?.accuracy || 0 }}%</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">流畅度：</span>
                <span class="detail-value">{{ analysisResult?.fluency || 0 }}%</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">完整度：</span>
                <span class="detail-value">{{ analysisResult?.completeness || 0 }}%</span>
              </div>
            </div>

            <div class="suggestions" v-if="analysisResult?.suggestions">
              <h4 class="suggestions-title">改进建议</h4>
              <ul class="suggestions-list">
                <li v-for="suggestion in analysisResult.suggestions" :key="suggestion">
                  {{ suggestion }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮区域 -->
      <div class="action-section">
        <div class="button-group">
          <nut-button
            type="primary"
            class="action-button"
            size="normal"
            round
            @click="goBack"
          >
            返回录音
          </nut-button>
          <nut-button
            type="default"
            class="action-button"
            size="normal"
            round
            @click="tryAgain"
          >
            重新测试
          </nut-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="VoiceResultPage">
  import { ref, onMounted } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { showToast } from 'vant';

  const router = useRouter();
  const route = useRoute();

  // 响应式数据
  const analysisResult = ref<any>(null);

  // 页面挂载时获取传递的结果数据
  onMounted(() => {
    // 从路由参数或状态中获取分析结果
    if (route.params.result) {
      try {
        analysisResult.value = JSON.parse(route.params.result as string);
      } catch (error) {
        console.error('解析分析结果失败:', error);
        showToast('获取分析结果失败');
        goBack();
      }
    } else if (history.state?.analysisResult) {
      analysisResult.value = history.state.analysisResult;
    } else {
      showToast('未找到分析结果');
      goBack();
    }
  });

  // 返回录音页面
  const goBack = () => {
    router.back();
  };

  // 重新测试
  const tryAgain = () => {
    router.replace('/detection');
  };
</script>

<style lang="scss" scoped>
.voice-result-page {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding-top: 46px;
  overflow: hidden;
}

.page-content {
  padding: 4vw 4vw 0 4vw;
  height: calc(100vh - 46px);
  display: flex;
  flex-direction: column;
}

.result-section {
  flex: 1;
  margin-bottom: 4vw;
  overflow-y: auto;
  min-height: 0;
}

.result-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 5.33vw;
  padding: 8vw 6vw;
  box-shadow: 0 2.67vw 8vw rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.result-title {
  text-align: center;
  font-size: 6.4vw;
  font-weight: 600;
  color: #333;
  margin-bottom: 8vw;
}

.result-content {
  .score-display {
    text-align: center;
    margin-bottom: 8vw;

    .score-circle {
      width: 32vw;
      height: 32vw;
      border-radius: 50%;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 4vw;
      position: relative;

      .score-number {
        font-size: 9.6vw;
        font-weight: bold;
        color: white;
      }

      .score-total {
        font-size: 4.27vw;
        color: rgba(255, 255, 255, 0.8);
        position: absolute;
        bottom: 6.67vw;
        right: 5.33vw;
      }
    }

    .score-level {
      font-size: 4.8vw;
      font-weight: 500;
      color: #666;
      margin: 0;
    }
  }
  
  .result-details {
    margin-bottom: 8vw;

    .detail-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4vw 0;
      border-bottom: 0.27vw solid #f0f0f0;

      &:last-child {
        border-bottom: none;
      }

      .detail-label {
        font-size: 4.27vw;
        color: #666;
      }

      .detail-value {
        font-size: 4.27vw;
        font-weight: 600;
        color: #333;
      }
    }
  }
  
  .suggestions {
    margin-bottom: 4vw;

    .suggestions-title {
      font-size: 4.8vw;
      font-weight: 600;
      color: #333;
      margin-bottom: 4vw;
    }

    .suggestions-list {
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        background: #f8f9fa;
        padding: 3.2vw 4vw;
        margin-bottom: 2.67vw;
        border-radius: 2.67vw;
        font-size: 3.73vw;
        color: #666;
        line-height: 1.5;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.action-section {
  flex-shrink: 0;
  padding: 4vw;
  margin: 0 -4vw 10vw -4vw;
  background: transparent;

  .button-group {
    display: flex;
    gap: 4vw;

    .action-button {
      flex: 1;
      height: 13.33vw;
      font-size: 4.27vw;
      font-weight: 500;
    }
  }
}
</style>
